<template>
	<view class="activity-detail-page">

		<!-- Tab切换栏 -->
		<view class="tab-container">
			<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
				活动详情
			</view>
			<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
				参与活动客户
			</view>
		</view>

		<!-- Tab内容区域 -->
		<view class="tab-content">
			<!-- 活动详情Tab -->
			<view v-if="currentTab === 0" class="detail-content" style="padding-top: 88rpx;overflow-y: scroll;">
				<!-- 活动标题 -->
				<view class="activity-title">{{detailData.youxiName}}</view>

				<!-- 活动基本信息 -->
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">活动类型：</text>
						<text class="info-value">{{detailData.youxiType}}</text>
					</view>
					<view class="info-item">
						<!-- <view class="info-item" @click="show = true" > -->
						<text class="info-label">活动阶段：</text>
						<text class="info-value">计划中</text>
						<!-- <u-icon name="arrow-right" color="#999" size="24rpx" class="right-icon"></u-icon> -->
					</view>
					<view class="info-item">
						<text class="info-label">起止时间：</text>
						<text class="info-value">{{detailData.youxiStime}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">结束时间：</text>
						<text class="info-value">{{detailData.youxiEtime}}</text>
					</view>
				</view>

				<!-- 活动规则 -->
				<view class="section">
					<view class="section-title">
						<text>活动规则</text>
						<u-icon name="info-circle" color="#ff9800" size="24rpx" class="rule-icon"></u-icon>
					</view>
					<view class="rule-content">
						<view class="rule-item">(一)、 参与资格:</view>
						<view class="rule-item">本次活动仅限受邀请的客户参与，重点覆盖近半年活跃但未深度绑定业务的客户及潜力客群。非受邀客户无法参与。</view>
						<view class="rule-item">(二)、 抽奖规则:</view>
						<view class="rule-item"><span class="fontType">1.每人限抽一次：</span>
							同一客户仅可参与一次抽奖，重复操作无效，系统将自动拦截并提示“只有一次机会，您已抽奖”。 </view>
						<view class="rule-item"><span
								class="fontType">2.即时开奖：</span>客户点击“开始抽奖”后，大转盘随机停止并实时显示中奖结果（奖品以页面实际展示为准，包含电煮锅、电吹风、保温杯等实物类奖品，无虚拟或消费券类奖励）。
						</view>
						<view class="rule-item"><span
								class="fontType">3.信息填写要求：</span>中奖客户需在活动页面如实填写真实有效的个人信息（包括但不限于姓名、手机号等），用于奖品发放与身份核验。
						</view>
						<view class="rule-item"><span
								class="fontType">4.逾期/未填视为放弃：</span>若客户未在规定时间内填写信息，或提交的信息不完整/不真实（经核实无效），则视为自动放弃奖品，且不予补发。
						</view>
						<view class="rule-item">(三)、 其他说明:</view>
						<view class="rule-item"><span
								class="fontType">1.活动真实性：</span>所有奖品均为实物，真实有效。农信社保留对活动规则的最终解释权，若发现恶意刷奖、虚假信息等违规行为，有权取消中奖资格。
						</view>
						<view class="rule-item"><span class="fontType">2.咨询渠道：</span>客户如有疑问，客户经理需第一时间响应解答。</view>
						<view class="rule-item"></view>
						<view class="rule-item"></view>
						<view class="rule-item"></view>
						<view class="rule-item"></view>
					</view>
				</view>

				<!-- 宣传文案 -->
				<view class="section">
					<view class="section-title">
						<u-icon name="star" color="#ffcc00" size="24rpx" class="star-icon"></u-icon>
						<text>宣传文案</text>
					</view>
					<textarea class="copy-textarea" v-model="copyText" placeholder="请输入宣传文案..." disabled></textarea>
					<button class="copy-btn" @click="copyToClipboard">复制文案</button>
				</view>



				<!-- 活动规则 -->
				<view class="section">
					<view class="section-title">
						<text>活动规则</text>
						<u-icon name="info-circle" color="#ff9800" size="24rpx" class="rule-icon"></u-icon>
					</view>
					<view class="rule-content">
						<view class="rule-item">(一)、 奖项设置</view>
						<view class="rule-item">
							本次活动奖品均为实物类，具体以客户转盘页面展示为准，常见奖品包括：<br />低频奖品：<br />电煮锅（1.5L，家用煮面煲汤）、<br />电吹风（大功率速干）、<br />保温杯（500ml，24小时锁温）；<br />
							其他奖品：<br />大米（5Kg）、食用油（1.8L）、钥匙扣（一个）、手机支架（一个）、<br />幸运参与奖（根据客户经理所在区域可能微调，以实际页面为准）。<br />
						</view>

						<view class="rule-item">(二)、领奖流程</view>
						<view class="rule-item"><span
								class="fontType">1.客户操作：</span>中奖后，客户需在活动页面填写真实姓名、手机号等个人信息（用于身份核验及领奖通知）。 </view>

						<view class="rule-item"><span
								class="fontType">2.信息审核：</span>农信社工作人员将在1-2个工作日内核对客户提交的信息，确保真实有效（隐私严格保密）。 </view>

						<view class="rule-item"><span
								class="fontType">3.网点领取：</span>审核通过后，客户经理将同步中奖客户具体领奖网点地址（根据客户所在地分配至就近网点）及可领取时间（信息审核通过后3-7个工作日内）；
							客户需携带中间凭证至指定网点，经工作人员核对信息后领取实物奖品。 </view>
						<view class="rule-item">(三)、 客户经理注意事项 </view>

						<view class="rule-item">若客户中奖，需明确领奖需至线下网点（非邮寄）； </view>
						<view class="rule-item">对于高龄或行动不便客户，客户经理可协调网点提供协助（如提前备好奖品、安排专人对接）； </view>
						<view class="rule-item">每日通过CRM系统更新客户参与状态（参与/领奖完成），确保活动覆盖率达100%。</view>
						<view class="rule-item"></view>
					</view>
				</view>
				<!-- 奖项设置 -->
				<!-- <view class="section">

				</view> -->

			</view>

			<!-- 参与活动客户Tab -->
			<view v-if="currentTab === 1" class="detail-content" style="padding-top: 88rpx;">
				<!-- 参与客户列表 -->
				<view class="customer-count">客户 ({{activeTotal}})</view>

				<u-list @scrolltolower="scrolltolower" height="100%">

					<u-list-item v-for="(item,index) in infoListData" :key="index">
						<view class="customer-item">
							<view class="avatar-container">
								<image class="avatar" src="/static/images/avatar1.png" mode="widthFix">
								</image>
							</view>

							<view class="customer-info">
								<view class="name-company">
									<text class="customer-name">{{item.zjName}}</text>

								</view>
								<view class="stage">
									手机号：<text class="stage-text">{{item.zjMobile}}</text>
								</view>
								<view class="stage">
									参与阶段：<text class="stage-text"
										@click="editType(item)">{{item.status == 0?'参与':'领奖完成'}}<u-icon name="arrow-right"
											color="#2979ff" size="12" style="display: inline-block;"></u-icon></text>
								</view>
							</view>

							<view class="action-btn" @click="contactCustomer(item)">
								<u-icon name="more-dot-fill" color="#3589e7" size="32rpx"></u-icon>
							</view>
						</view>
					</u-list-item>
				</u-list>

				<u-empty text="暂无参与客户数据" mode="list" class="empty-customer" v-show="activeTotal ==0"></u-empty>
			</view>
			<!-- 筛选选择器 (u-picker) -->
			<u-picker :show="showPicker" :columns="typeList" keyName="label" @confirm="handlePickerConfirm"
				@cancel="showPicker = false" title="更改参与阶段"></u-picker>
		</view>

		<!-- 底部操作按钮 -->
		<!-- <view class="bottom-btn-container">
			<button class="bottom-btn" @click="copyActivityLink">复制活动链接并转发</button>
		</view> -->



		<!-- 筛选阶段 -->
		<!-- <u-picker :show="show" :columns="columns" @cancel="show = false"></u-picker> -->
	</view>
</template>

<script>
	import api from "@/utils/api.js";
	import request from "@/utils/request.js";

	export default {
		data() {
			return {
				showPicker: false, //筛选
				pageSize: 10,
				codeData: "", //code值 (链接需要)
				currentTab: 0, // 0:活动详情 1:参与活动客户
				// copyText: "",
				show: false,
				detailData: [], //详情信息
				infoListData: [], //参与活动客户
				activeTotal: 0, //客户总数
				columns: [
					['了解', '感兴趣', '参与', '完成']
				],
				typeList: [
					[

						{
							label: '参与',
							value: 0
						},
						{
							label: '领奖完成',
							value: 1
						}
					]
				],
				typeName: 0,
				infoId: '',
			};
		},
		onLoad(options) {
			console.log(options, "999");
			if (options) {
				this.codeData = options.code;
				this.getDetailData(options.Id);
				this.getActiveInfoList()
			}
		},
		computed: {
			copyText() {
				// return `【幸运大转盘】银商联盟专属活动来袭！参与即可赢取丰厚奖品，快来加入吧！活动时间：${this.detailData.youxiStime}至${this.detailData.youxiEtime},点击链接参与活动叭--${this.detailData.youxiUrl}?code=${this.codeData}`
				return `🎁 专属福利！幸运大转盘，好礼等您拿～

亲爱的客户朋友：

感谢您一直以来对XX农信社的信任与支持！我们特别为您准备了「幸运大转盘」感恩回馈活动，无需任何消费或门槛，受邀即可参与！

📦 活动好礼：电煮锅、电吹风、保温杯等实用家居好礼等您来拿！
⏰ 活动时间：
    ${this.detailData.youxiStime}至${this.detailData.youxiEtime}

🎯 活动规则（超简单！）：
• 仅限受邀客户参与（恭喜您已获得参与资格！）
• 每人仅限参与1次，确保公平公正
• 点击"开始抽奖"，转盘随机停转，立即显示中奖结果(奖品以页面展示为准)

🏆 中奖后只需两步：
1. 如实填写姓名、手机号等基本信息
2. 审核通过后，3-7个工作日内可至指定网点领取实物奖品

💡 温馨提示：
• 本活动真实有效，所有奖品均为实物奖励！
• 奖品数量有限，先到先得，赶快参与吧！

立即点击专属链接参与抽奖：${this.detailData.youxiUrl}?code=${this.codeData}

感谢您的参与，祝您好运！🎉`
			}
		},
		methods: {
			// 获取详情信息
			getDetailData(id) {
				request(api.activeDetail + id, "GET")
					.then(res => {
						// console.log(res);
						if (res.code == 200) {
							this.detailData = res.data;
						}
					})
					.catch(err => {
						console.log(err);
					})
				// activeDetail
			},
			// 获取参与活动客户
			getActiveInfoList() {
				let data = {
					pageSize: this.pageSize,
					pageNum: 1,
				}
				request(api.activeInfoList, "GET", data)
					.then(res => {
						// console.log(res);
						if (res.code == 200) {
							console.log(res);
							this.infoListData = res.rows;
							this.activeTotal = res.total;
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 跳转详情
			contactCustomer(item) {
				uni.navigateTo({
					url: `/pages/active/components/infoDetail?Id=${item.id}`
				})
			},
			scrolltolower() {
				// console.log('123123123');
				if (this.pageSize < this.activeTotal) {
					this.pageSize = this.pageSize + 10;
					this.getActiveInfoList()
					console.log("页数", this.pageSize);
				}

			},
			// 返回上一页
			navBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 显示更多操作
			showMore() {
				uni.showActionSheet({
					itemList: ['编辑活动', '删除活动', '查看数据'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								uni.showToast({
									title: '进入编辑',
									icon: 'none'
								});
								break;
							case 1:
								this.confirmDelete();
								break;
							case 2:
								uni.showToast({
									title: '查看数据统计',
									icon: 'none'
								});
								break;
						}
					}
				});
			},

			// 确认删除
			confirmDelete() {
				uni.showModal({
					title: '提示',
					content: '确定要删除该活动吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack({
								delta: 1
							});
							uni.showToast({
								title: '活动已删除',
								icon: 'success'
							});
						}
					}
				});
			},

			// 切换Tab
			switchTab(index) {
				this.currentTab = index;
			},

			// 复制文案到剪贴板
			copyToClipboard() {
				uni.setClipboardData({
					data: this.copyText,
					success: () => {
						uni.showToast({
							title: '文案已复制',
							icon: 'success'
						});
					}
				});
			},

			// 复制活动链接并转发
			copyActivityLink() {
				uni.setClipboardData({
					data: 'https://example.com/activity/lucky-draw/123',
					success: () => {
						uni.showToast({
							title: '链接已复制',
							icon: 'success'
						});
						// 延迟显示转发选项
						setTimeout(() => {
							uni.showShareMenu({
								withShareTicket: true,
								menus: ['shareAppMessage', 'shareTimeline']
							});
						}, 500);
					}
				});
			},
			// 更改状态(领奖状态)
			editType(item) {
				this.showPicker = true
				this.infoId = item.id;
			},
			handlePickerConfirm(e) {
				console.log(e, '-')
				const {
					value,
					label
				} = e.value[0];
				this.typeName = value;
				this.showPicker = false
				const data = {
					id: this.infoId,
					status:value
				}
				request(api.activeEditInfo, 'PUT', data)
					.then(res => {
						console.log(res);
						this.getActiveInfoList()
					})
					.catch(Error => {
						console.log(Error);
					})
			},
		}
	};
</script>

<style scoped>
	.activity-detail-page {
		background-color: #f5f7fa;
		/* height: 100vh; */
		height: calc(100vh - var(--window-top));
		display: flex;
		flex-direction: column;
		padding: 10px;
		box-sizing: border-box;
		/* padding-bottom: 120rpx; */
		/* 预留底部按钮空间 */
	}

	/* 导航栏样式 */
	::v-deep .u-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}

	/* Tab切换栏 */
	.tab-container {
		display: flex;
		background-color: #fff;
		position: fixed;
		top: 0;
		/* 导航栏高度 */
		left: 0;
		right: 0;
		z-index: 9;
		border-bottom: 1px solid #f0f0f0;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		font-size: 30rpx;
		color: #666;
		position: relative;
	}

	.tab-item.active {
		color: #3589e7;
		font-weight: 500;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 30%;
		width: 40%;
		height: 4rpx;
		background-color: #3589e7;
	}

	/* Tab内容区域 */
	.tab-content {
		/* padding-top: 88rpx; */
		overflow: hidden;
		flex: 1;
		/* height: calc(100vh -88rpx); */
		/* 导航栏(88) + Tab栏(88) */
	}

	/* 活动详情样式 */
	.detail-content {
		/* padding: 24rpx; */
		height: 100%;
		/* padding-bottom: 30rpx; */
		box-sizing: border-box;
	}

	.activity-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;
		/* padding-bottom: 24rpx; */
		/* border-bottom: 1px solid #f0f0f0; */
	}

	.info-list {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.info-label {
		color: #999;
		font-size: 28rpx;
		min-width: 160rpx;
	}

	.info-value {
		color: #333;
		font-size: 28rpx;
		flex: 1;
	}

	.right-icon {
		margin-left: 10rpx;
	}

	/* 区块样式 */
	.section {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		color: #333;
		font-size: 30rpx;
		font-weight: 500;
		margin-bottom: 24rpx;
	}

	.rule-icon,
	.setting-icon,
	.star-icon {
		margin-left: 10rpx;
	}

	/* 活动规则内容 */
	.fontType {
		font-weight: bold;
	}

	.rule-content {
		padding-left: 10rpx;
	}

	.rule-item {
		color: #666;
		font-size: 28rpx;
		margin-bottom: 16rpx;
		line-height: 1.5;
	}

	.rule-item:last-child {
		margin-bottom: 0;
	}

	/* 奖项设置占位区 */
	.award-placeholder {
		height: 200rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 15rpx;
		display: flex;
		/* align-items: center; */
		/* justify-content: center; */
		/* color: #ccc; */
		font-size: 26rpx;
		box-sizing: border-box;
	}

	/* 宣传文案区域 */
	.copy-textarea {
		width: 100%;
		min-height: 180rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		resize: none;
	}

	.copy-btn {
		background-color: #f0f7ff;
		color: #3589e7;
		border: none;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
	}

	/* 参与客户Tab样式 */
	.customer-content {
		padding: 24rpx;
		/* min-height: 500rpx; */
		height: calc(100vh -88rpx);
	}

	.empty-customer {
		margin-top: 200rpx;
	}

	/* 底部操作按钮 */
	.bottom-btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 8;
	}

	.bottom-btn {
		background-color: #3589e7;
		color: #fff;
		border: none;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		border-radius: 8rpx;
	}

	/* 客户列表区域 */
	.customer-list {
		padding: 24rpx;
		/* padding: 176rpx 24rpx 24rpx; */
		/* 导航栏+Tab栏高度 */
		/* display: flex; */
		/* flex-direction: column; */
	}

	/* 客户总数 */
	.customer-count {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
		padding-left: 8rpx;
	}

	/* 客户列表项 */
	.customer-items {
		flex: 1;
		background-color: #fff;
		border-radius: 12rpx;
		overflow-y: scroll;
		/* overflow: auto; */
	}

	.customer-item {
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding: 20rpx 24rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.customer-item:last-child {
		border-bottom: none;
	}

	/* 头像区域 */
	.avatar-container {
		position: relative;
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: #f0f0f0;
	}

	/* 特殊客户标识 */
	.special .special-marker {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		background-color: #ff7d00;
		border: 2rpx solid #fff;
	}

	/* 客户信息 */
	.customer-info {
		flex: 1;
		min-width: 0;
		/* 解决文本溢出问题 */
	}

	.name-company {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.customer-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-right: 12rpx;
	}

	.company {
		font-size: 24rpx;
		color: #999;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.stage {
		font-size: 26rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.stage-text {
		color: #3589e7;
	}

	/* 操作按钮 */
	.action-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #f0f7ff;
	}
</style>